<!-- src/App.vue -->
<template>
  <div class="app">
    <app-header :show-docs="showDocs" @toggle-docs="toggleDocs" />
    
    <component-documentation v-if="showDocs" />
    
    <todo-input @add-todo="handleAddTodo" />
    
    <todo-list
      :todos="todos"
      v-model:filter="filter"
      :filtered-todos="filteredTodos"
      :remaining-count="remainingCount"
      :completed-count="completedCount"
      @update:todo="updateTodo"
      @remove-todo="removeTodo"
      @clear-completed="clearCompleted"
    />
    
    <todo-stats
      v-if="todos.length > 0"
      :total-count="todos.length"
      :remaining-count="remainingCount"
      :completed-count="completedCount"
      :completion-rate="completionRate"
      :last-saved-time="lastSavedTime"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import AppHeader from './components/AppHeader.vue'
import ComponentDocumentation from './components/ComponentDocumentation.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoStats from './components/TodoStats.vue'
import useTodos from './composables/useTodos.js'

export default {
  name: 'App',
  components: {
    AppHeader,
    ComponentDocumentation,
    TodoInput,
    TodoList,
    TodoStats
  },
  setup() {
    const {
      todos,
      filter,
      lastSavedTime,
      filteredTodos,
      remainingCount,
      completedCount,
      completionRate,
      addTodo,
      removeTodo,
      clearCompleted
    } = useTodos();

    const showDocs = ref(false);

    const toggleDocs = () => {
      showDocs.value = !showDocs.value;
    };

    const handleAddTodo = (text) => {
      if (text) {
        const id = Date.now();
        addTodo({ id, text, completed: false });
      }
    };

    const updateTodo = (updatedTodo) => {
      const index = todos.value.findIndex(t => t.id === updatedTodo.id);
      if (index !== -1) {
        todos.value[index] = updatedTodo;
      }
    };

    return {
      todos,
      filter,
      lastSavedTime,
      filteredTodos,
      remainingCount,
      completedCount,
      completionRate,
      showDocs,
      toggleDocs,
      handleAddTodo,
      updateTodo,
      removeTodo,
      clearCompleted
    };
  }
}
</script>

<style>
.app {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}
</style>